<template>
  <view class="invoice_list_item" @click="toDetail(props.item)">
    <view class="top">
      <view class="title">
        <text>{{ props.item.headTile || '' }}</text>
        <view class="status orange" v-if="props.item.status=='1'">待开票</view>
        <view class="status blue" v-else-if="props.item.status=='3'">完成</view>
        <view class="status red" v-else-if="props.item.status=='4'">异常</view>
        <view class="status orange" v-else-if="props.item.status=='3' && props.item.isRed=='1'">冲红审核</view>
      </view>
      <view class="content">
        <view>开票金额：¥{{ props.item.invoiceMoney || '0.00' }}</view>
        <view v-if="props.item.sendType=='1'">领取网点：{{ props.item.branchName ? props.item.branchName+'网点' : '-' }}</view>
        <view v-else-if="props.item.sendType=='2'">邮寄地址：{{ props.item.sendAdd || '-' }}</view>
        <view v-else-if="props.item.sendType=='3'">收件邮箱：{{ props.item.email || '-' }}</view>
        <view>开票时间：{{ props.item.creaTetime }}</view>
      </view>
    </view>
    <view class="bottom">
      <view class="invoice_type type_1" v-if="props.item.billType=='1'">普票</view>
      <view class="invoice_type type_2" v-else>专票</view>
      <view class="tools">
        <template v-if="props.item.status=='1'">
          <view class="btn" @click.stop="handleCancel(item)">取消开票</view>
        </template>
        <template v-else-if="props.item.status=='3' && props.item.isRed=='0'">
          <view class="btn" @click.stop="handleReverse(item)">冲红申请</view>
          <view class="btn info" @click.stop="handleDownload(item)">下载发票</view>
        </template>
        <template v-else-if="props.item.status=='2'">
          <view class="btn" @click.stop="toDial(item.phone)">联系网点</view>
        </template>
<!--        <template v-else-if="props.item.status==3">-->
<!--          <view class="btn">冲红审核</view>-->
<!--        </template>-->
      </view>
    </view>
    <dialBranch :show="showTelPopup" :tel="branchTel" :title="'拨打电话'" @close="showTelPopup=false" :show-close="true"></dialBranch>
  </view>
</template>

<script setup lang="ts">
import { computed, onMounted, ref, watch } from "vue";
import dayjs from "dayjs";
import Taro from "@tarojs/taro";
import drawer from '@/components/drawer'
import dialBranch from "@/components/dialBranch/index"

const props = defineProps<{
  item: any;
  index: number;
}>();
const emit = defineEmits(['handleReverse','handleCancel']);

const handleReverse = (item)=>{
  emit('handleReverse',item)
}
const handleCancel = (item)=>{
  emit('handleCancel',item)
}
const handleDownload = (item)=>{
  if(item.pdfUrl){
    Taro.downloadFile({
      url: item.pdfUrl,
      success: res => {
        // Taro.saveFile({
        //   tempFilePath: item.pdfUrl,
        //   success: (res)=>{
        //     const savedFilePath = res.savedFilePath
        //     console.log(savedFilePath,999666)
        //   }
        // })
        Taro.openDocument({ //打开文档
          filePath: res.tempFilePath,//本地文档路径
          fileType: "pdf",//文档类型
          showMenu: true,
          success: function (res) {
          },
          fail: function (res) {
            Taro.showToast({
              title: '打开文档失败',
            })
          },
        })
      }
    })
  }
  else{
    Taro.showToast({
      icon: 'error',
      title: '下载发票异常'
    })
  }
}
//网点电话弹窗
const showTelPopup = ref<boolean>(false)
const branchTel = ref<string>('')
const toDial= async (tel) => {
  if(tel){
    branchTel.value = tel
    showTelPopup.value = true
  }
  else{
    Taro.showToast({
      icon: 'none',
      title: '该网点无联系方式'
    })
  }
}

const toDetail = (item) => {
  Taro.navigateTo({
    url: '/pages/invoicing/detail?id='+item.ssiId,
  })
}

</script>

<style lang="scss">
.invoice_list_item {
  width: 100%;
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 16rpx;
  padding: 0 24rpx;
  box-sizing: border-box;
  .top {
    box-sizing: border-box;
    padding: 16rpx 0 26rpx;
    .title {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      text {
        color: #252525;
        font-size: 28rpx;
        line-height: 40rpx;
        font-weight: 600;
      }
      .status {
        height: 40rpx;
        line-height: 40rpx;
        text-align: center;
        font-size: 24rpx;
        padding: 0 12rpx;
        border-radius: 8rpx;
        font-weight: 500;
        &.orange {
          color: #ff8f1f;
          background-color: rgba(255, 143, 31, 0.16);
        }
        &.blue {
          color: #0966ff;
          background-color: rgba(9, 102, 255, 0.16);
        }
        &.red {
          color: #fa5151;
          background-color: rgba(250, 81, 81, 0.16);
        }
      }
    }
    .content {
      width: 100%;
      margin-top: 8rpx;
      view {
        width: 100%;
        margin-top: 8rpx;
        line-height: 28rpx;
        color: #666;
        letter-spacing: -0.48rpx;
        font-size: 22rpx;
      }
    }
  }
  .bottom {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 104rpx;
    border-top: 1rpx solid #f5f5f5;
    .invoice_type {
      width: 64rpx;
      height: 40rpx;
      text-align: center;
      line-height: 40rpx;
      color: #fff;
      font-size: 22rpx;
      border-radius: 8rpx;
      &.type_1 {background: linear-gradient(137deg, #3783FF 17%, #125AD2 86%);}
      &.type_2 {background: linear-gradient(124deg, #13E879 15%, #0EC365 89%);}
    }
    .tools {
      display: flex;
      align-items: center;
      //flex-direction: row-reverse;
      .btn {
        margin-left: 16rpx;
        box-sizing: border-box;
        width: 144rpx;
        height: 56rpx;
        //line-height: 56rpx;
        //text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 24rpx;
        color: #252525;
        border-radius: 28rpx;
        border: 1rpx solid #c4c4c4;
        &.info {
          border-color: #0966ff;
          color: #0966ff;
        }
      }
    }
  }
}
</style>
